<template>
  <div class="fill">
    <confirm v-model="show" :title="'确认删除此张图片？'" @on-cancel="onCancel" @on-confirm="onConfirm">
      <p style="text-align:center;">您将在编辑区内 删除此张图片？</p>
    </confirm>
    <alert v-model="showalert" :title="alertTitle"> {{ alertMsg }}</alert>
    <div class="contianer">
      <header>发布体验团测评</header>
      <ul>
        <li>
          <label for="">品牌/产品名称</label><input type="text" v-model="proname" value="proname"></li>
        <li class="rate">
          <span>点评</span>
          <rater v-model="raterval" :max="5" :font-size="30" active-color="#fbce0d" :value="raterval"></rater>
        </li>
        <template v-if="ceping">
          <li>
            <label for="">标题</label><input type="text"></li>
          <li>
            <label for="">摘要</label><input type="text"></li>
          <li class="rate">
            <label for="">封面图</label>
            <span class="upcover"><img :src="headerImg" alt="">
              <label for="upheaderimg">+</label>
            </span>
            <Upload @fileData="imgHeaderBase" :id="'upheaderimg'" />
          </li>
        </template>
        <li class="box-info" v-for="items of infor" :key="items.index">
          <div class="textArea" v-if="items.type=='txt'&&items.val.length!=0" contenteditable="true" @blur="deleteText($event,items.index)" @keydown="changeWord($event,items.index)" v-text="items.val"></div>
          <div v-if="items.type=='img'&&items.val.length!=0"><img :src="items.val" alt=""><img :src="delImg" class="delete-img animated bounceIn" alt="" @click="showConfirm(items.index)"></div>
        </li>
        <li class="text-box">
          <div class="textArea" contenteditable="true" placeholder="和我们谈谈您的美妆秘诀" @input="updateMsg()" @blur="blurText" ref="t">
          </div>
          <label class="insert" for="upimg">
            <p>插入图片</p>
            <p>+</p>
          </label>
          <Upload @fileData="imgBase" :id="'upimg'" />
        </li>
        <li class="limit" v-if="!ceping">0/500</li>
      </ul>

    </div>
    <footer @click="sendform()"></footer>
  </div>
</template>
<script>
import { Rater, Confirm, Alert } from 'vux'
import Preview from '@/components/tips/Preview'
import Upload from '@/components/tips/Upload'
import '@/assets/lib/jquery-1.8.2.min.js'
//图片裁剪
// import '@/assets/style/cropper.min.css'
// import '@/assets/lib/cropper.min.js'
//图片上传

import { log } from 'util';
import { sep } from 'path';
export default {
  data() {
    return {
      show: false,
      showalert: false,
      alertTitle: '',
      alertMsg: '',
      proname: '',
      raterval: 0,
      protext: '',
      ceping: false,
      holderintro: "和我们谈谈您的美妆秘诀",
      headerImg: '',
      delImg: require('@/assets/img/del.png'),
      infor: [
      ],
      imgindex: '',
      myhtml: ''
    }
  },
  computed: {

  },
  watch: {
    proname(val) {
      console.log(val);
      return val;
    },
    raterval(val) {
      console.log(val);
      return val;
    },
    protext(val) {
      console.log(val);
      return val;
    },
    fileData(val) {
      console.log(val);
      return val;
    }
  },
  components: { Rater, Preview, Upload, Confirm, Alert },
  mounted() {
    this.$nextTick(() => {
      this.ceping = this.$route.name == 'fillceping' ? 0 : 1;
      // this.holderintro = this.$route.name == 'fillceping' ? "和我们谈谈您的体验感受" : "和我们谈谈您的美妆秘诀";
    })
  },
  methods: {
    uploadImg($event) {
      console.log($event.target.files[0]);
    },
    //裁剪图片
    cropImg($event) {
      var crop = $($event.target).cropper({
        aspectRatio: 16 / 9,
        crop: function (data) {
          // 出来裁切后的图片数据.
          console.log(data);
        }
      });
      var data = $($event.target).cropper('getCroppedCanvas', {
        width: 300, // 裁剪后的长宽
        height: 100
      });

      console.log(data);
      var blob = processData(data.toDataURL());
      var formData = new FormData();
      formData.append('uploadImg', blob);
      $.ajax({
        url: '/path/to/upload',
        method: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function () {
          console.log('Upload success');
        },
        error: function () {
          console.log('Upload error');
        }
      });

    },
    updateMsg() { },
    //验证 表单数据非空
    checkData() {
      if (!Boolean(this.proname)) {
        this.alertMsg = "请输入名称"
        return false;
      }
      return true;
    },
    //发送表单数据
    sendform() {

      if (!this.checkData()) {

        return;
      }
      let formdata = {
        name: this.proname,
        rate: this.raterval,
        sendData: JSON.stringify(this.infor)
      }
      let stringify = JSON.stringify(formdata);
      console.log(stringify);
      formdata = JSON.parse(JSON.parse(stringify).sendData)
      console.log(formdata)

    },
    //确认是否删除整行
    changeWord($event, index) {
      console.log(!Boolean($event.target.innerText));
      if (!Boolean($event.target.innerText)) {
      }
    },
    //删除文字
    deleteText($event, index) {
      console.log($event.target.innerText, index);
      this.infor.map((items, i, obj) => {
        if (items.index == index) {
          console.log(items.val, $event.target.innerText);
          this.$set(this.infor, i,
            {
              index: i, val: $event.target.innerText, type: 'txt'
            })
        }
      })
      console.log($event.target);

    },

    //显示弹窗
    showConfirm(index) {
      this.show = true;
      this.imgindex = index;
    },
    onCancel() {
      console.log('on cancel')
    },
    onConfirm(index) {
      console.log('on confirm')
      console.log(this.imgindex);
      this.infor.map((items, i, obj) => {
        if (items.index == this.imgindex) {
          this.$set(this.infor, i,
            {
              index: items.index, val: '', type: 'img'
            })
        }
      })

    },
    //输入完成失去焦点
    blurText() {
      this.myhtml = this.$refs.t.innerText;
      if (!this.myhtml) {
        return;
      }
      this.infor.push({ index: this.infor.length, val: this.myhtml, type: 'txt' });
      this.$refs.t.innerText = '';
      // alert('失去焦点');
    },
    //封面图片
    imgHeaderBase(data) {
      this.headerImg = data;
    },
    //获取子组件传回的值
    imgBase(data) {
      this.infor.push({ index: this.infor.length, val: data, type: 'img' });
      console.log(this.infor);
    }
  },
}
</script>
<style lang="less" scoped>
.fill {
  padding: 60px 30px;
  width: 100%;
  min-height: 100%;
  background: url("../../assets/img/main-bg.png") no-repeat;
  background-size: cover;
  .contianer {
    padding-bottom: 30px;
    border-radius: 25px;
    width: 100%;
    background: #fff;
    min-height: 770px;
    header {
      padding-top: 18px;
      color: #ff3585;
      font-size: 36px;
      font-weight: bold;
    }
    ul {
      margin-top: 40px;
      > li:first-child {
        label {
          width: 280px;
        }
      }
      .box-info {
        position: relative;
        flex-direction: column;
        padding-top: 0;
        > li {
          padding: 0;
        }

        .textArea {
          width: 100%;
          background: #ddd;
          height: auto;
          border-radius: 0;
        }
        div {
          width: 100%;
          position: relative;
          .delete-img {
            background: #fff;
            padding: 10px;
            border-radius: 50%;
            position: absolute;
            right: 20px;
            top: 20px;
            width: 58px;
            height: 58px;
          }
          > img {
            width: 100%;
            vertical-align: bottom;
          }
        }
      }
      .text-box {
        position: relative;
        flex-direction: column;
        .textArea {
          min-height: 133px;
          padding: 15px 15px 85px 15px;
        }
        div {
          width: 100%;
          padding: 0.234375rem;
          > img {
            width: 100%;
          }
        }
      }
      .rate {
        padding: 15px 40px;
      }
      > li {
        font-weight: bold;
        padding: 15px 40px 0;
        text-align: left;
        display: flex;
        display: -webkit-flex;
        vertical-align: middle;
        .textArea {
          font-size: 24px;
          margin: 0 auto;
          padding: 15px;
          background: #e2e2e2;

          -webkit-user-modify: read-write-plaintext-only;
        }
        .textArea:empty:before {
          content: attr(placeholder);
          color: #b0b0b0;
        }
        .insert {
          display: flex;
          display: -webkit-flex;
          flex-direction: column;
          position: absolute;
          right: 55px;
          bottom: 10px;
          padding: 0;
          width: 105px;
          height: 75px;
          font-weight: normal;
          color: #e2e2e2;
          border: 3px dashed #e2e2e2;
          background: #fff;
          font-size: 20px;
          text-align: center;
          vertical-align: middle;
          justify-content: center;
          align-items: center;
          p {
            width: 100%;
            align-self: center;
            margin: auto;
          }
          p:last-child {
            font-size: 24px;
          }
        }
        span {
          align-self: center;
          font-size: 24px;
          padding-right: 20px;
        }
        label {
          margin-right: 20px;
          align-self: center;
          display: inline-block;
          color: #3d3d3d;
          font-size: 24px;
          min-width: 56px;
          vertical-align: middle;
        }
        input {
          align-self: center;
          padding-left: 15px;
          font-size: 24px;
          width: 100%;
          height: 60px;
          vertical-align: middle;
          border-radius: 15px;
          background: #e2e2e2;
        }
        .upcover {
          display: inline-block;
          padding: 0;
          width: 105px;
          height: 75px;
          line-height: 75px;
          color: #e2e2e2;
          border: 3px dashed #e2e2e2;
          font-size: 36px;
          text-align: center;
          vertical-align: middle;
          > img {
            width: 100%;
            height: 100%;
            z-index: 222;
          }
          label {
            margin: 0;
            padding: 0;
            float: left;
            width: 100%;
          }
        }
      }

      .limit {
        display: flex;
        display: -webkit-flex;
        justify-content: flex-end;
        color: #e2e2e2;
      }
    }
  }
  footer {
    margin: 20px auto 0;
    width: 474px;
    height: 96px;
    background: url("../../assets/img/submit.png") no-repeat;
    background-size: 474px 96px;
  }
}
</style>
